<template>
  <div class="app">
    <div ref="box" class="text-2xl">AOS Animations in Nuxt</div>

    <div ref="section" class="section">4</div>
    <div ref="section" class="section1">5</div>
    <div ref="section" class="section2">6</div>
    <div ref="section" class="section3">7</div>
    <div ref="section" class="section4">8</div>
    <div ref="section" class="section5">9</div>
  </div>
</template>

<script>
export default {
  name: 'About',

  data() {
    return {}
  },

  head: {
    title: '关于',
  },

  mounted() {
    // this.animate()
    // this.init()
  },

  methods: {
    animate() {
      this.$gsap.fromTo(
        this.$refs.box, // 动画目标是 box 元素
        { x: -300 }, // 初始位置：视口外 300px
        {
          x: 0, // 结束位置：滑入视口
          duration: 1, // 动画持续时间 1秒
          ease: 'power1.inOut', // 缓动效果
        }
      )
    },
    init() {
      this.$gsap.fromTo(
        this.$refs.section,
        {
          y: 400, // 初始位置
          opacity: 0, // 初始透明度
        },
        {
          y: 0, // 结束位置
          opacity: 1, // 结束透明度
          duration: 1.5,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: this.$refs.section, // 触发器为 section 元素
            start: 'top 50%', // 当 section 顶部到达视口 80% 时触发
            end: 'bottom 10%', // 当 section 底部到达视口 20% 时结束动画
          },
        }
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: green;
}
.section {
  height: 300px;
  background-color: lightblue;
  margin: 20px 0;
  font-size: 2rem;
}
.section1 {
  height: 300px;
  background-color: rgb(41, 186, 234);
  margin: 20px 0;
  font-size: 2rem;
}
.section2 {
  height: 300px;
  background-color: rgb(57, 179, 23);
  margin: 20px 0;
  font-size: 2rem;
}
.section3 {
  height: 300px;
  background-color: rgb(230, 121, 39);
  margin: 20px 0;
  font-size: 2rem;
}
.section4 {
  height: 300px;
  background-color: rgb(193, 32, 32);
  margin: 20px 0;
  font-size: 2rem;
}
.section5 {
  height: 300px;
  background-color: rgb(9, 10, 71);
  margin: 20px 0;
  font-size: 2rem;
}
</style>
